<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box div {
            float: left;
            position: relative;
            margin-left: 10px;
        }
        #box div span {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #box div img {
            height: 100px;
        }
    </style>
</head>
<body>

<div id="box"></div>
<script>
    var boxObj = document.getElementById('box');

//    boxObj.innerHTML = '<h2>aaa</h2>'
//    boxObj.innerHTML = boxObj.innerHTML + '<h2>bbbb</h2>'
    var imgs = [
       [ 'image/1.jpg','雪山','标题1'],
        ['image/2.jpg','冬天','标题2'],
        ['image/3.jpg','山水','标题2'],
       [ 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg','海边','标题4']
    ];
    var s = ''
    for (var i in imgs){
        s = s + '<div><img src="'+ imgs[i][0] + '" title="'+ imgs[i][1] + '"><span>'+ imgs[i][2] +'</span></div>';
    }
    boxObj.innerHTML = s;
</script>
</body>
</html>